<template>
  <div>
    <div class="background">
      <img src="../assets/lgb.jpg" width="100%" height="100%" alt="" />
    </div>
    <div class="front">
      <el-container>
        <el-header>
          <img src="../assets/logo.png" class="mlogo" />
          <h1 style="font-size: 40px">登陆</h1>
        </el-header>
        <el-row style="heigth:500px">
          <el-col :span="12" :offset="6"
            ><el-card class="box-card ">
              <el-main
                ><el-form
                  :model="ruleForm"
                  status-icon
                  :rules="rules"
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="用户名: " prop="username">
                    <el-input
                      v-model="ruleForm.username"
                      autocomplete="off"
                      prefix-icon="el-icon-user-solid"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="密码: " prop="password">
                    <el-input
                      type="password"
                      v-model="ruleForm.password"
                      autocomplete="off"
                      show-password
                      prefix-icon="el-icon-key"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-row :gutter="50">
                      <!--<el-button type="primary" @click="submitForm('ruleForm')"
                >登陆</el-button
              >

              <el-button @click="resetForm('ruleForm')">注册</el-button>-->
                      <el-col :span="2"><div>&nbsp</div></el-col>
                      <el-col :span="6"
                        ><el-button
                          type="primary"
                          @click="submitForm('ruleForm')"
                          >登陆</el-button
                        ></el-col
                      >

                      <el-col :span="6"></el-col>
                      <el-col :span="6"
                        ><el-button @click="registForm('ruleForm')"
                          >注册</el-button
                        ></el-col
                      >
                    </el-row>
                  </el-form-item>
                </el-form></el-main
              >
            </el-card></el-col
          >
          <el-col :span="6"></el-col>
        </el-row>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",

  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        if (this.ruleForm.checkUsername !== "") {
          this.$refs.ruleForm.validateField("checkUsername");
        }
        callback();
      }
    };
    return {
      ruleForm: {
        username: "super",
        password: "123456"
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const _this = this;
          this.$axios.post("/login", this.ruleForm).then(res => {
            const jwt = res.headers["authorization"];
            const userInfo = res.data.data;
            _this.$store.commit("SET_TOKEN", jwt);
            _this.$store.commit("SET_USERINFO", userInfo);
            console.log(_this.$store.getters.getUser);
            _this.$router.push("/dashboard");
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    registForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("/register");
    }
  }
};
</script>

<style lang="scss" scoped>
.el-header,
.el-footer {
  /*  background-color: #b3c0d1;*/
  color: #333;
  text-align: center;
  line-height: 60px;
  height: 80% !important;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  /*background-color: #edeff1;*/
  background-color: transparent;
  color: transparent;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.demo-ruleForm {
  max-width: 400px;
  margin: 0 auto;
  background-color: transparent;
}

.mlogo {
  height: 150px;
  margin-top: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1 !important;
  position: absolute;
}
.front {
  z-index: 1 !important;
  background-color: transparent !important;
  margin: auto 0;
}
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
  background-color: transparent;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 550px;
  height: 250px;
  align-content: center;
  background-color: rgb(255, 255, 255);
}
</style>
